<template>
  <view class="settings">
    <view class="settings-content">
      <view class="section-box">
        <view class="section-content">
          <view class="item-line">
            <view class="current-scene">
              {{ currSceneName }}
            </view>
          </view>
          <view class="item-line" v-for="(item, index) in currSceneParams" :key="index" :class="{ time: item.isTimeStyle }">
            <view class="line-field">
              <view class="label">
                <text>{{ item.label }}</text>
              </view>
              <view class="content">
                {{ item.valueText }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-show="projectInfo.canEdit" class="section-box">
        <view class="section-content">
          <view v-for="item in sceneList" class="item-line" @click="chooseScene(item)">
            <view class="like-btn" :class="{active: item.id === currScene}">
              <text>{{ item.name }}</text>
            </view>
          </view>
          <view class="item-line new">
            <view class="like-btn" @click="addScene">
              <text>新增场景</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
import { SCENE_TIME_TYPE } from '@/constant';
import { formatDate, getWeekdaysByIndexArr } from '@/utils';
import mixin from '@/mixins/index.js'
export default {
  mixins: [mixin],
  props: {
    projectInfo: {
      type: Object
    },
    paramList: {
      type: Array
    },
    sceneList: {
      type: Array
    },
    sceneMap: {
      type: Object
    }
  },
  data() {
    return {
      currScene: '',
      currSceneName: '',
      currSceneParams: []
    }
  },
  watch: {
    paramList() {
      this.initData()
    },
    projectInfo() {
      this.initData()
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData() {
      const self = this
      self.currScene = self.projectInfo.scene
      self.currSceneName = self.projectInfo.sceneName
      const sceneObj = self.sceneMap[self.projectInfo.scene]
      if (sceneObj) {
        if (sceneObj.isTimeScene) {
          self.getSceneTimeList()
        } else if (Array.isArray(self.paramList)) {
          self.currSceneParams = Array.from(
              self.paramList.filter(
                  (item) => {
                    if (sceneObj?.type !== 3 && item.name === 'middle_light') {
                      return false;
                    }
                    return !item.hidden;
                  },
              ),
              (item) => {
                const currentValue = sceneObj?.params[item.name] ?? item.value
                const paramItem = {
                  key: item.key,
                  label: item.label,
                  valueText: currentValue,
                };
                if (item.type === 'selector') {
                  paramItem.valueText = item.nameMap[currentValue];
                }
                return paramItem;
              },
          )
        }
      }
    },
    getSceneTimeList() {
      const self = this
      const target = self.sceneMap[self.projectInfo.scene];
      const arr = [
        { label: '场景类型', valueText: '时控场景' },
        { label: '时控类型', valueText: target.sceneTypeText },
      ];
      if (target.scene_type === SCENE_TIME_TYPE.WEEKLY) {
        arr.push({ label: '生效时间', valueText: getWeekdaysByIndexArr(target.weekdays) });
      }
      if (target.scene_type === SCENE_TIME_TYPE.DATE_AREA) {
        arr.push({
          label: '生效时间',
          valueText: `${formatDate(target.date_start, 'yyyy-MM-dd')} - ${formatDate(target.date_end, 'yyyy-MM-dd')}`,
        });
      }
      uni.request({
        url: '/project_scene_time/list',
        data: {
          project_scene_id: self.projectInfo.scene,
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            result.data.data.forEach((item) => {
              arr.push({
                label: `${item.time_start.substring(0, 5)} - ${item.time_end.substring(0, 5)}`,
                valueText: self.sceneMap[item.scene]?.name || item.scene,
                isTimeStyle: true
              });
            });
          }
        },
        complete() {
          arr.push({ label: '其他时间', valueText: self.sceneMap[target.scene]?.name || target.scene, isTimeStyle: true });
          self.currSceneParams = arr;
        }
      })
    },
    chooseScene(target) {
      const self = this
      if (!self.projectInfo.canEdit) return
      if (target.id === self.currScene) return
      uni.request({
        url: '/project/modify',
        method: 'POST',
        data: {
          id: self.projectInfo.id,
          scene: target.id,
        },
        success(result) {
          if (result.data.success) {
            self.$emit('refresh')
            uni.showToast({
              icon: 'none',
              title: '保存成功'
            })
          }
        }
      })
    },
    viewScene(target) {
      if (target.scene_type === 0) {
        uni.navigateTo({
          url: `/pages/settings/add-scenario/add-scenario?projectId=${this.projectInfo.id}&sceneId=${target.id}`
        })
      } else {
        uni.navigateTo({
          url: `/pages/settings/add-time-scene/add-time-scene?projectId=${this.projectInfo.id}&id=${target.id}`
        })
      }
    },
    addScene() {
      const self = this
      if (!self.projectInfo.canEdit) return
      uni.navigateTo({
        url: `/pages/settings/add-scenario/add-scenario?projectId=${this.projectInfo.id}`
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.section-box {
  padding: 30rpx;
  background-color: $white;
  border-radius: 10rpx;
  margin-top: 40rpx;
  &:first-child {
    margin-top: 0;
  }
}
.section-title {
  @include section-title;
  & + .section-content {
    margin-top: 30rpx;
  }
}
.item-line {
  margin-top: 30rpx;
  &.new {
    border-top: 2rpx dashed $border-base;
    padding-top: 30rpx;
  }
  &:first-child {
    margin-top: 0;
  }
  .current-scene {
    text-align: center;
    font-size: 36rpx;
  }
  &.time {
    padding: 0 1em;
    & + .time {
      margin-top: 0;
      .line-field {
        border-top: 0;
      }
    }
    .line-field {
      border: 2rpx solid $border-base;
      .label {
        text-align: center;
        padding: 12rpx 20rpx;
        border-right: 2rpx solid $border-base;
        width: 240rpx;
        justify-content: center;
      }
      .content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12rpx 20rpx;
      }
    }
  }
  .line-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .like-btn {
    &.active {
      background-color: $primary;
    }
    border-radius: 10rpx;
    height: 80rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $text-secondary;
    color: #fff;
  }
  .label {
    font-size: $font-size-3;
    display: flex;
    align-items: center;
    .like-radio {
      margin-right: 16rpx;
    }
  }
}
.item-operate {
  margin-top: 40rpx;
  .operate-label {
    font-size: $font-size-3;
    font-weight: bold;
  }
  .line-desc {
    font-size: $font-size-0;
    color: $text-secondary;
  }
}
</style>
